import PropTypes from 'ant-design-vue/es/_util/vue-types'

const BlockCheckboxProps = {
  value: PropTypes.string,
  // Item: { key, url, title }
  list: PropTypes.array,

  i18nRender: PropTypes.oneOfType([PropTypes.func, PropTypes.bool]).def(false)
}

const baseClassName = 'ant-pro-setting-drawer-block-checbox'

const BlockCheckbox = {
  props: BlockCheckboxProps,
  inject: ['locale'],
  render (h) {
    const { value, list } = this
    const i18n = this.$props.i18nRender || this.locale

    const items = list || [
      {
        key: 'sidemenu',
        title: i18n('app.setting.sidemenu')
      },
      {
        key: 'topmenu',
        title: i18n('app.setting.topmenu')
      },
      {
        key: 'top-left',
        title: i18n('app.setting.topLeft')
      }
    ]

    const handleChange = (e) => {
      const key = e.target.value
      this.$emit('change', key)
    }

    return (
      <div class={baseClassName} key={value}>
        <a-radio-group value={value} onChange={handleChange}>
        {items.map(item => (
          <a-radio-button value={item.key} disabled={item.disable}> { item.title } </a-radio-button>
        ))}
        </a-radio-group>
      </div>
    )
  }
}

export default BlockCheckbox
